/* eslint-disable jsx-a11y/anchor-is-valid */
import React, { Component } from 'react'
import {
  Image,
  InputNumber,
  Button,
  Tabs,
  Descriptions,
  Badge,
  Popover,
} from 'antd'
import {
  ShoppingCartOutlined,
  HeartOutlined,
  QuestionCircleFilled,
} from '@ant-design/icons'
import './index.less'
const { TabPane } = Tabs
class Details extends Component {
  onChange = (value) => {
    console.log('changed', value)
  }
  callback = (key) => {
    console.log(key)
  }
  render() {
    return (
      <div id="details">
        Details{this.props.match.params.id}
        <div className="header">
          <div className="left">
            <Image
              width={400}
              src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
            />
          </div>
          <div className="center">
            {/* 商品名称 */}
            <div className="tr_nodbr">
              <h3>某某某某中药</h3>
            </div>
            {/* 价格 */}
            <div className="txt">
              <span className="nowprice">￥599.00</span>
              <div className="cumulative">
                <span className="number">
                  累计出售
                  <br />
                  <em>370</em>
                </span>
                <span className="number">
                  累计评价
                  <br />
                  <em>25</em>
                </span>
              </div>
            </div>
            {/* 分类 */}
            <div className="txt-h">
              <span className="tex-o">分类</span>
              <ul
                class="glist"
                id="glist"
                data-monitor="goodsdetails_fenlei_click"
              >
                <li>
                  <div title="红色36g" href="">
                    红色36g
                  </div>
                </li>
                <li>
                  <div title="蓝色16g" href="">
                    红色36g
                  </div>
                </li>
              </ul>
            </div>
            {/* 数量 */}
            <div class="gcIpt">
              <span class="guT">数量</span>
              <InputNumber
                size="large"
                min={1}
                max={100000}
                defaultValue={1}
                onChange={this.onChange}
              />
              <span class="Hgt">库存(99)</span>
            </div>
            {/* 操作 */}
            <div class="nobdr-btns">
              <Button
                className="addcart "
                type="primary"
                icon={<ShoppingCartOutlined />}
              >
                加入购物车
              </Button>
              <Button
                className="addcart yh"
                type="primary"
                icon={<HeartOutlined />}
                danger
              >
                累计购买
              </Button>
            </div>
            {/* 备注 */}
            <div class="guarantee">
              <span>邮费：包邮&nbsp;&nbsp;支持货到付款 </span>
              <QuestionCircleFilled />
            </div>
          </div>
          <div className="right">
            <div className="brand-logo">
              <img
                alt="浙江中医药大学"
                src="http://demo.mxyhn.xyz:8020/cssthemes6/zly2021010120_17/images/ho_03.png"
              />
            </div>
            <div className="seller-pop-box">
              <span className="tr">商家名称：浙江中医药大学A店</span>
              <span className="tr">商家等级：初级店铺</span>
              <span className="tr">客家电话：15012365897</span>
              <span className="tr hoh">
                <div title="河南郑州市航海路57号河南郑州市航海路57号" href="">
                  所在地区：河南郑州市航海路57号河南郑州市航海路57号
                </div>
              </span>
            </div>
          </div>
        </div>
        <div className="body">
          <Tabs defaultActiveKey="1" onChange={this.callback} size="large">
            <TabPane tab="规格参数" key="1">
              <Descriptions title="User Info" bordered>
                <Descriptions.Item label="Product">
                  Cloud Database
                </Descriptions.Item>
                <Descriptions.Item label="Billing Mode">
                  Prepaid
                </Descriptions.Item>
                <Descriptions.Item label="Automatic Renewal">
                  YES
                </Descriptions.Item>
                <Descriptions.Item label="Order time">
                  2018-04-24 18:00:00
                </Descriptions.Item>
                <Descriptions.Item label="Usage Time" span={2}>
                  2019-04-24 18:00:00
                </Descriptions.Item>
                <Descriptions.Item label="Status" span={3}>
                  <Badge status="processing" text="Running" />
                </Descriptions.Item>
                <Descriptions.Item label="Negotiated Amount">
                  $80.00
                </Descriptions.Item>
                <Descriptions.Item label="Discount">$20.00</Descriptions.Item>
                <Descriptions.Item label="Official Receipts">
                  $60.00
                </Descriptions.Item>
                <Descriptions.Item label="Config Info">
                  Data disk type: MongoDB
                  <br />
                  Database version: 3.4
                  <br />
                  Package: dds.mongo.mid
                  <br />
                  Storage space: 10 GB
                  <br />
                  Replication factor: 3
                  <br />
                  Region: East China 1<br />
                </Descriptions.Item>
              </Descriptions>
            </TabPane>
            <TabPane tab="商品介绍" key="2">
              Content of 商品介绍
            </TabPane>
            <TabPane tab="商家信息" key="3">
              <Descriptions title="User Info">
                <Descriptions.Item label="UserName">
                  Zhou Maomao
                </Descriptions.Item>
                <Descriptions.Item label="Telephone">
                  1810000000
                </Descriptions.Item>
                <Descriptions.Item label="Live">
                  Hangzhou, Zhejiang
                </Descriptions.Item>
                <Descriptions.Item label="Remark">empty</Descriptions.Item>
                <Descriptions.Item label="Address">
                  No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
                </Descriptions.Item>
              </Descriptions>
            </TabPane>
            <TabPane tab="售后保障" key="4">
              Content of 售后保障
            </TabPane>
          </Tabs>
        </div>
      </div>
    )
  }
}

export default Details
